<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 404px;
            height: 40px;
            border: 1px solid black;
            border-radius: 20px;
        }

        .small {
            width: 0;
            height: 100%;
            border-radius: 20px;
            background-color: goldenrod;
            text-align: center;
            line-height: 40px;
        }

        .box {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
            <span class="number">0</span><span>%</span>
        </div>
    </div>
    <div class="box">
        <input type="button" value="上传" class="star">
        <input type="button" value="暂停" class="stop">
        <input type="button" value="继续" class="goOn">
        <input type="button" value="清空" class="zero">
    </div>

    <script>


        // num判断  考虑到不能被整除的情况
        // 按钮 disabled   不需要做防抖或者节流的处理
        // 面向对象  封装



        // class Progress {
        //     constructor() {
        //         this.bigDom = this.get('.box')
        //         this.smallDom = document.querySelector('.small');
        //         this.boxDom = document.querySelector('.box');
        //         this.numberDom = document.querySelector('.number');
        //         this.starDom = document.querySelector('.star');

        //         // 保存定时器标识
        //         this.timer = null;

        //         // 增加的宽度
        //         this.num = 0;

        //         this.event()
        //     }

        //     get(ele) {
        //         return document.querySelector(ele)
        //     }

        //     event() {
        //         this.boxDom.addEventListener('click', function (e) {
        //             if (e.target.className == 'star') {
        //                 go()
        //             } if (e.target.className == 'stop') {
        //                 clearInterval(timer)
        //             } if (e.target.className == 'goOn') {
        //                 go();
        //             } if (e.target.className == 'zero') {
        //                 clearInterval(this.timer);
        //                 this.smallDom.style.width = 0;
        //                 this.numberDom.innerHTML = 0;
        //                 this.num = 0;
        //                 this.starDom.disabled = false;
        //             }

        //         })
        //     }

        //     go() {
        //         // if (timer) clearInterval(timer);
        //         starDom.disabled = true;
        //         //大盒子的宽度
        //         const maxWidth = parseInt(window.getComputedStyle(bigDom).width);
        //         timer = setInterval(function () {

        //             num += 10;
        //             // 小盒子的宽度
        //             let width = parseInt(window.getComputedStyle(smallDom).width);

        //             // 判断小盒子的宽度等大盒子的宽度的时候停止定时器
        //             if (num == maxWidth) {
        //                 clearInterval(timer)
        //             } else {
        //                 smallDom.style.width = num + 'px';
        //                 numberDom.innerHTML = Math.ceil(num / maxWidth * 100);
        //             }


        //         }, 100)



        //     }
        // }


















        


       
    </script>
</body>

</html>